<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">

    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>

    <!-- <div class="ui-footer ui-btn-group ui-border-t ui-spring-footer">
        <a href="#" class="active"><i class="i1"></i>首页</a>
        <a href="#"><i class="i2"></i>发起项目</a>
        <a href="#"><i class="i3"></i>个人中心</a>
    </div> -->

    <div class="ui-footer ui-footer-navi ui-btn-group ui-border-t">
        <a href="#" class="active"><i class="i1"></i><div>首页</div></a>
        <a href="#"><i class="i2"></i><div>发起项目</div></a>
        <a href="#"><i class="i3"></i><div>个人中心</div></a>
        <a href="#"><i class="i4"></i><div>个人中心</div></a>
    </div>
    
    <section class="ui-container">
        <div class="ui-slider">
            <ul class="ui-slider-content">
                <li><span style="background-image:url(../images/demo/demo-poster.png)"></span></li>
                <li><span style="background-image:url(../images/demo/demo-poster.png)"></span></li>      
                <li><span style="background-image:url(../images/demo/demo-poster.png)"></span></li>
            </ul>
        </div>

        <div class="p-title">精选推荐<a href="#" class="btn ui-arrowlink">更多</a></div>
        <ul class="fp-list-tiled ui-grid-trisect">
            <li>
                <a href="#">
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/70x70)">
                            <span>企业</span>
                            <p class="ui-nowrap">100万元</p>
                        </span>
                    </div>
                    <div>
                        <h5 class="ui-nowrap">兴业全球基金会</h5>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/70x70)">
                            <span>团体</span>
                            <p class="ui-nowrap">10万元</p>
                        </span>
                    </div>
                    <div>
                        <h5 class="ui-nowrap">兴业全球</h5>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ui-grid-trisect-img">
                        <span style="background-image:url(http://placeholder.qiniudn.com/70x70)">
                            <span>个人</span>
                            <p class="ui-nowrap">1万元</p>
                        </span>
                    </div>
                    <div>
                        <h5 class="ui-nowrap">兴业</h5>
                    </div>
                </a>
            </li>
        </ul>

        <div class="p-title">精选推荐<a href="#" class="btn ui-arrowlink">更多</a></div>
        <ul class="p-list">
            <li>
                <a href="#">
                    <div class="top" style="background-image:url(../images/demo/demo-project-1.jpg)">
                        <div class="h3-box"><h3>3万留守儿童的渴望</h3></div>
                        <div class="ui-progress">
                            <span style="width:50%"></span>
                        </div>
                        <div class="status">募集中</div>
                    </div>
                    <div class="bottom">
                        <div class="infos">
                            <div class="infos-l">共<span class="num">4293</span>人捐助</div>
                            <div class="infos-r">还差<span class="num">2200</span>元</div>
                        </div>
                        <p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="top" style="background-image:url(../images/demo/demo-project-2.jpg)">
                        <div class="h3-box"><h3>分享零花钱顶起童年</h3></div>
                        <div class="ui-progress yellow">
                            <span style="width:100%"></span>
                        </div>
                        <div class="status yellow">已筹满</div>
                    </div>
                    <div class="bottom">
                        <div class="infos">
                            <div class="infos-l">共<span class="num">3306</span>人捐助</div>
                            <div class="infos-r">还差<span class="num">0</span>元</div>
                        </div>
                        <p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="top" style="background-image:url(../images/demo/demo-project-2.jpg)">
                        <div class="h3-box"><h3>分享零花钱顶起童年</h3></div>
                        <div class="ui-progress yellow">
                            <span style="width:100%"></span>
                        </div>
                        <div class="status yellow">已筹满</div>
                    </div>
                    <div class="bottom">
                        <div class="infos">
                            <div class="infos-l">共<span class="num">3306</span>人捐助</div>
                            <div class="infos-r">还差<span class="num">0</span>元</div>
                        </div>
                        <p>和“真爱公益”一起，为74所学校共29877名留守儿童筹集善款制作故事盒子。</p>
                    </div>
                </a>
            </li>
        </ul>
        <a href="#" class="btn-all btn-white">查看全部项目</a>
        <!-- <div class="ui-line ft">
            <p>查看全部项目</p>
        </div> -->
    </section>

    <!-- <div class="preload-box">
        <img src="../images/preloading.gif" alt=""/>
        <p>加载中...</p>
    </div> -->
    
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script src="../js/util.js"></script>

    <script>
        (function() {
            var slider = new fz.Scroll('.ui-slider', {
                role: 'slider',
                indicator: true,
                autoplay: true,
                interval: 3000
            });
            slider.on('beforeScrollStart', function(from, to) {
                // console.log(from, to);
            });
            slider.on('scrollEnd', function(curPage) {
                // console.log(curPage);
            });

            // preLoad(500);

            $(window).scroll(function(){
                
                if ($(window).scrollTop() > 200) {
                    console.log(1);
                }
            });

        })();
    </script>
</body>
</html>